import TEMPLATE from './template';
import methods from "./methods";
import {addClass, addListener, forEach, setData} from "./utils";
import events from "./events";
import handlers from "./handlers";
import render from "./render";
import {BUTTONS} from "./constants";

class Viewer {
    constructor(element) {
        console.log('viewer', 'constructor')
        this.element = element
        this.fading = false
        this.hiding = false
        this.imageData = {}
        this.isImg = false
        this.length = 0
        this.isShown = false
        this.ready = false
        this.showing = false
        this.timeout = false
        this.viewed = false
        this.viewing = false
        this.zooming = false
        this.init()
    }

    init() {
        console.log('viewer', 'init')
        const {element} = this

        const isImg = element.tagName.toLowerCase() === 'img'
        const images = []
        forEach(isImg ? [element] : element.querySelector('img'), (image) => {
            images.push(image)
        })
        this.isImg = isImg
        this.length = images.length
        this.images = images

        const {ownerDocument} = element
        const body = ownerDocument.body || ownerDocument.documentElement
        this.body = body
        this.scrollbarWidth = window.innerWidth - ownerDocument.documentElement.clientWidth
        this.initialBodyPaddingRight = window.getComputedStyle(body).paddingRight
        addListener(element, 'click', ({target}) => {
            if (target.tagName.toLowerCase() === 'img') {
                this.view()
            }
        })
    }

    build() {
        console.log('viewer', 'build')
        const {element} = this
        const template = document.createElement('div')
        template.innerHTML = TEMPLATE

        const viewer = template.querySelector('.viewer-container')
        const title = template.querySelector('.viewer-title')
        const toolbar = template.querySelector('.viewer-toolbar')
        const navbar = template.querySelector('.viewer-navbar')
        const button = template.querySelector('.viewer-button')
        const canvas = template.querySelector('.viewer-canvas')
        this.viewer = viewer
        this.title = title
        this.toolbar = toolbar
        this.navbar = navbar
        this.button = button
        this.canvas = canvas
        this.footer = template.querySelector('.viewer-footer')
        this.list = template.querySelector('.viewer-list')

        addClass(viewer, 'viewer-backdrop')
        setData(canvas, 'viewerAction', 'hide')

        const list = document.createElement('ul')
        forEach(BUTTONS, (value, index) => {
            const item = document.createElement('li')
            item.setAttribute('role', 'button')
            addClass(item, `viewer-${value}`)
            setData(item, 'viewerAction', value)
            list.appendChild(item)
        })
        toolbar.appendChild(list)

        addClass(button, 'viewer-close')
        addClass(viewer, 'viewer-fixed')
        addClass(viewer, 'viewer-fade')
        addClass(viewer, 'viewer-hide')
        viewer.style.zIndex = '2021'

        let container = element.ownerDocument.querySelector('body')
        container.appendChild(viewer)
        this.ready = true
    }
}

Object.assign(Viewer.prototype, render, events, handlers, methods)

export default Viewer
